<template>
	<div class="addworkingdays-container">
		<el-dialog :title="titleWorkingDays" custom-class="detailsworkDays-dialog" append-to-body :visible.sync="showAddWorkingDays" width="40%" :before-close="handleClose">
			<el-form :model="form" :rules="rules" ref="calendarForm">
				<el-form-item label="规则名称" prop="defaultWorkingName">
					<el-input
						v-model="form.defaultWorkingName"
						placeholder="请输入规则名称"
						:disabled="inputDisabled"
						maxlength="40"
						@input="e => (form.defaultWorkingName = validForbid(e))"
					></el-input>
				</el-form-item>
				<el-form-item label="" class="btn" v-show="showSyncBtn">
					<el-button @click="syncData" disabled>同步</el-button>
				</el-form-item>
			</el-form>
			<div class="calendar-box">
				<div class="select-calendar">
					<el-select v-model="years">
						<el-option v-for="item in getYearOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</div>
				<Calendar :years="years" v-if="showCalendar" :calendarDaySelected="calendarDaySelected"></Calendar>
			</div>
			<p class="p-text">*首次打开默认为当月所有日期全部未选中状态</p>
			<span slot="footer" class="dialog-footer" v-if="showDetailsBtn">
				<el-button @click="clearWorkingDays">清 空</el-button>
				<el-button type="primary" @click="submitWorkingDays">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import Calendar from './Calendar.vue';
export default {
	components: {
		Calendar
	},
	props: {
		showAddWorkingDays: {
			type: Boolean,
			require: true,
			default: () => false
		},
		showSyncBtn: {
			type: Boolean,
			require: true,
			default: () => false
		},
		titleWorkingDays: {
			type: String,
			required: true,
			default: () => ''
		},
		defaultWorkingName: {
			type: String,
			required: true,
			default: () => ''
		},
		inputDisabled: {
			type: Boolean,
			required: true,
			default: () => false
		},
		showCalendar: {
			type: Boolean,
			required: true,
			default: () => false
		},
		calendarDaySelected: {
			type: Boolean,
			required: true,
			default: () => false
		},
		showDetailsBtn: {
			type: Boolean,
			require: true,
			default: () => false
		}
	},

	mounted() {},
	data() {
		return {
			nowDays: this.getDate(new Date()),
			form: {
				defaultWorkingName: this.defaultWorkingName || ''
			},
			selectYear: null,
			value: '',
			options: [],
			years: '',
			rules: {
				defaultWorkingName: [{ required: true, message: '请输入规则名称', trigger: 'blur' }]
			}
		};
	},
	created() {
		if (this.setDate) {
			this.nowDays = this.getDate(this.setDate);
		}
	},
	computed: {
		//获取近五年
		getYearOptions() {
			let year = new Date().getFullYear();
			this.years = year;
			let options = [
				{ label: '2021', value: '2021' },
				{ label: '2022', value: '2022' },
				{ label: '2023', value: '2023' },
				{ label: '2024', value: '2024' },
				{ label: '2025', value: '2025' }
			];
			return options;
		}
	},
	methods: {
		getDate(date) {
			return {
				year: this.selectYear || date.getFullYear(),
				month: date.getMonth(),
				day: date.getDay(),
				date: date.getDate()
			};
		},
		//关闭新增/编辑/查看的弹窗
		handleClose() {
			this.$emit('handleClose');
			this.$refs['calendarForm'].resetFields();
		},
		//清空工作日
		clearWorkingDays() {
			this.$emit('clearWorkingDays', this.years);
		},
		//提交工作日规则数据
		submitWorkingDays() {
			this.$refs['calendarForm'].validate(valid => {
				if (valid) {
					let name = this.form.defaultWorkingName;
					this.$emit('submitWorkingDays', name);
					this.$refs['calendarForm'].resetFields();
				} else {
					console.error('error submit!!');
					return false;
				}
			});
		},
		//同步外系统的工作日数据
		syncData() {
			this.$emit('syncData', this.years);
		}
	}
};
</script>

<style lang="less" scoped>
.detailsworkDays-dialog {
	.el-form {
		display: flex;
		.el-form-item {
			display: flex;
		}
		.btn {
			margin-left: 10px;
			.el-button {
				height: 34px;
				width: 64px;
				padding: 0;
				border: 1px solid #6384fe;
				color: #6384fe;
			}
		}
	}
	.calendar-box {
		display: flex;
		.select-calendar {
			margin: 10px 0px 20px;
			border: 2px solid #eee;
			box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
			border-radius: 4px;
			width: 14%;
			.el-select {
				width: 100%;
				border-bottom: 1px solid #eee;
				input {
					border: none;
				}
			}
		}
	}
	.p-text {
		height: 12px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #b8b8b8;
		line-height: 16px;
	}
}
</style>

<style lang="less">
.detailsworkDays-dialog {
	.el-dialog__body {
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		.select-calendar {
			.el-input__icon {
				line-height: 27px;
			}
			input {
				border: none;
			}
		}
	}
}
</style>
